<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="../../vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- <my-header 
      title="hello" 
      @my-event="handleEvent"
      @click.native="handleClick"
      :obj="obj"
    ></my-header>
    <my-footer :obj="obj"></my-footer> -->
    <my-body 
      v-bind.sync="body"
    >
      <div>{{body.info}}</div>
    </my-body>
  </div>
  <script>
    Vue.config.productionTip = false

    const MyFooter = {
      props: ['obj'],
      template: `
        <div>footer {{obj2}}</div>
      `,
      data() {
        return {
          // obj2: this.obj
          footerObj: {
            z: 1000
          }
        }
      },
      mounted() {
        // this.obj2 = {
        //   x: 1000
        // }
        this.footerObj = {
          z: 100000
        }
      },
      computed: {
        obj2() {
          return {
            ...this.obj,
            ...this.footerObj
          }
        }
      }
    }

    const MyHeader = {
      props: {
        title: {
          type: String
        },
        obj: {
          type: Object
        }
      },
      template: `
        <div @click="handleDivClick">
          <h1>title {{obj}}</h1>
        </div>
      `,
      mounted() {
        this.$emit('my-event', 100)
        // this.title = 'abc'
      },
      methods: {
        handleClick() {
          console.log('clicked')
        },
        handleDivClick() {
          console.log('child div click')
        }
      },
    }
    
    const MyBody = {
      props: ['body'],
      template: `
        <div>
          <slot></slot>
        </div>
      `,
      mounted() {
        this.$emit('update:info', '我想当太子!')
      },
    }

    var vm = new Vue({
      el: '#root',
      data: {
        aaa: 'aaa',
        obj: {
          x: 100
        },

        body: {
          info: 'string',
          year: 2050
        }
      },
      components: {
        MyHeader,
        MyFooter,
        MyBody
      },
      methods: {
        handleEvent(data) {
          console.log(data)
        },
        handleClick() {
          console.log('parent div clicked.')
        },


        // handleMessage(msg) {
        //   this.body = msg
        // }
      },
      mounted() {
        this.obj = {
          y: 100,
          x: 1000
        }

        setTimeout(() => {
          this.body = '准了！'
        }, 3000)
      },
    })
  </script>
</body>
</html>